<template>
    <div class="channel-page">
        <span class="article-title">Channel管理</span>
        <div class="fliter">
            <div style="display: flex;align-items: center;">
                <span style="font-size: 14px;">账户名称：</span>
                <el-select v-model="accountId" style="width:250px;margin-right: 10px;" placeholder="请选择账户名称" clearable
                    @change="getChannelData()
                        ">
                    <el-option v-for="item in accountOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <span style="font-size: 14px;">状态：</span>
                <el-select v-model="status" style="width:250px;margin-right: 10px;" placeholder="请选择状态" clearable
                    @change="getChannelData()
                        ">
                    <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>

        </div>
        <div class="article-table">
            <el-button type="primary" @click="handleAddChannel()">+ 添加Channel ID</el-button>
            <el-table :data="tableData" v-loading="loading"
                :header-cell-style="{ background: '#fafafa', height: '56px', }"
                style="width: 100%;margin-top: 20px;margin-bottom: 20px; height: calc(100% - 70px);">
                <template v-for="(item, index) in tableHeader" :key="index">
                    <el-table-column :prop="item.prop" :label="item.label" :min-width="item.width" :fixed="index === 0">
                        <template #default="scope">
                            <span v-if="item.prop === 'status'">{{ scope.row[item.prop] ? '不可用' : '可用' }}</span>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>
                    </el-table-column>
                </template>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <div style="display: flex;align-items: center;gap: 15px;">
                            <span style="cursor: pointer;color: red;" @click="handleDelete(scope.row.id)">删除</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                style="display: flex;justify-content: end;" layout="total,prev, pager, next,sizes" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <ChannelAdd ref="channelAdd" />
    </div>
</template>

<script setup lang="ts">
import { defineComponent, onActivated, ref } from 'vue';
import ChannelAdd from '../components/channelAdd.vue'
defineComponent({ name: 'Channel' })
import service from '../config';
import { ElMessage } from 'element-plus';
const pageNum = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const accountOptions = ref([])
const accountId = ref()
const status = ref()
const channelAdd = ref<{ openModal: () => void }>()
const tableHeader = ref([
    { label: '账户', prop: 'accountName', width: 200 },
    { label: 'ChannelId', prop: 'id', width: 200 },
    { label: 'ChannelName', prop: 'name', width: 200 },
    { label: '状态', prop: 'status', width: 200 },
])
const statusOptions = ref([{ id: 0, name: '可用' }, { id: 1, name: '不可用' }])

const handleAddChannel = () => {
    channelAdd.value?.openModal()
}

const handleDelete = (id) => {
    service.post('/channel/delete', { id })
        .then(response => {
            getChannelData()
        })
        .catch(error => {
            ElMessage.error(error)
        });
}

const getChannelData = () => {
    service.post('/channel/page', { pageNum: pageNum.value, pageSize: pageSize.value, accountId: accountId.value, status: status.value })
        .then(response => {
            loading.value = false
            tableData.value = response.data?.records
            total.value = response?.data?.total
        })
        .catch(error => {
            loading.value = false
            ElMessage.error(error)
        });
}

const handleSizeChange = () => {
    pageNum.value = 1
    getChannelData()
}

const handleCurrentChange = () => {
    getChannelData()
}

const getAccount = () => {
    service.get('/account/getAll')
        .then(response => {
            accountOptions.value = response?.data
            accountOptions.value.push({ id: -1, name: '其他' })
        })
        .catch(error => {
            ElMessage.error(error)
        });
}

onActivated(() => {
    getChannelData()
    getAccount()
})

</script>

<style lang="scss">
.channel-page {
    background-color: #fff;
    height: calc(100% - 10px);
    padding: 30px;
    width: 100%;
    box-sizing: border-box;

    .article-title {
        font-size: 20px;
        font-weight: 600;
    }

    .fliter {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin: 30px 0;

        .filter-item {
            display: flex;
            width: 33%;
            gap: 5px;
            align-items: center;
        }
    }

    .el-button--primary {
        background-color: #1677ff;
    }

    .article-table {
        margin-top: 30px;
        height: calc(100% - 150px);
    }

    .el-drawer {
        width: 100% !important;
    }

    .el-drawer__body {
        padding: 0;
    }

    .el-table__row {
        font-size: 13px;
    }

}
</style>
